<!doctype html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta http-equiv="Content-Language" content="en" />
  <meta name="msapplication-TileColor" content="#2d89ef">
  <meta name="theme-color" content="#4188c9">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <link rel="icon" href="./favicon.ico" type="image/x-icon" />
  <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
  <title>公司管理</title>
  <script src="./assets/js/require.min.js"></script>
  <script src="./assets/js/owner_work.js"></script>
  <link href="./assets/css/dashboard.css" rel="stylesheet" />
  <script src="./assets/js/dashboard.js"></script>

</head>

<body class="">
  <div class="" role="alert" id="alert_tip">
    <i class="" aria-hidden="true"></i> <span> </span>
  </div>
  <div class="page">
    <div class="flex-fill">
      <div class="header py-4">
        <div class="container">
          <div class="d-flex">
            <a class="header-brand" href="./index.html">
              <h2 class="mt-0 mb-4">Owner-work</h2>
            </a>
            <div class="d-flex order-lg-2 ml-auto">
              <div class="nav-item d-none d-md-flex">
                <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
              </div>
              <div class="dropdown">
                <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                  <span class="avatar avatar-lg" ></span>
                  <span class="ml-2 d-none d-lg-block">
                    <span class="text-default" id="userName"> </span>
                    <small class="text-muted d-block mt-1">Administrator</small>
                  </span>
                </a>
                <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                  <a class="dropdown-item" href="./user_info.html">
                    <i class="dropdown-icon fe fe-user"></i> 个人信息
                  </a>
                  <a class="dropdown-item" href="#">
                    <i class="dropdown-icon fe fe-settings"></i> 设置
                  </a>
                  <a class="dropdown-item" href="./email_change.html">
                    <i class="dropdown-icon fe fe-mail"></i> 更改邮箱
                  </a>
                  <a class="dropdown-item" href="./password_change.html">
                    <i class="dropdown-icon fe fe-send"></i> 更改密码
                  </a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="./faq.html" target="_blank">
                    <i class="dropdown-icon fe fe-help-circle"></i> 需要帮助?
                  </a>
                  <a class="dropdown-item" href="#" onclick="loginOut()">
                    <i class="dropdown-icon fe fe-log-out"></i> 退出
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
        <div class="container">
          <div class="row align-items-center">
            <div class="col-lg order-lg-first">
              <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                <li class="nav-item">
                  <a href="./index.html" class="nav-link"><i class="fe fe-cloud"></i> 首页</a>
                </li>
                <li class="nav-item dropdown">
                  <a href="./company.html" class="nav-link active"><i class="fe fe-cloud-drizzle"></i> 公司管理</a>
                </li>
                <li class="nav-item">
                  <a href="./company_data.html" class="nav-link"><i class="fe fe-cloud-lightning"></i>账户管理 </a>
                </li>
                <li class="nav-item">
                  <a href="./logger.html" class="nav-link"><i class="fe fe-cloud-rain"></i> 操作日志</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="my-3 my-md-5">
        <div class="container">
          <div class="col-12">
            <div class="card">
              <div class="card-header">
                <button type="button" class="btn btn-outline-primary" data-toggle="modal"
                  data-target="#newCompanyModal">
                  <i class="fe fe-plus mr-2"></i>新增公司
                </button>
                <div class="col-lg-3 ml-auto">
                  <form class="input-icon my-3 my-lg-3">
                    <input type="text" class="form-control header-search" placeholder="输入公司名称" name="search">
                    <div class="input-icon-addon">
                      <button type="button" class="btn btn-secondary" onclick="queryCompany()"><i
                          class="fe fe-search"></i></button>
                    </div>
                  </form>
                </div>
              </div>
              <div class="dimmer" id="dimmer_body">
                <div class="loader"></div>
                <div class="table-responsive dimmer-content">
                  <table class="table card-table table-vcenter text-nowrap datatable">
                    <thead>
                      <tr>
                        <th class="w-1">No.</th>
                        <th>公司名称</th>
                        <th>管理人</th>
                        <th>公司地址</th>
                        <th>就任职位</th>
                        <th>是否在职</th>
                        <th>备注</th>
                        <th>编辑</th>
                        <th>删除</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>暂无数据！</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="card-footer" name="pagnate" style="text-align: center;">
                <label>共 <span id="data_count">1</span> 条</label>
                <label>每页 <select name="the_limit" class="select">
                    <option value="5">5</option>
                    <option value="10">10</option>
                    <option value="15">15</option>
                  </select> 条</label>
                <label>
                  <button class="btn btn-blue" id="previou_page">上一页</button>
                  <label><span id="current_page">1</span> / <span id="total_page">1</span></label>
                  <button class="btn btn-blue" id="next_page">下一页</button>
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer class="footer">
      <div class="container">
        <div class="row align-items-center flex-row-reverse">
          <div class="col-auto ml-lg-auto">
            <div class="row align-items-center">
              <div class="col-auto">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item"><a href="./faq.html" target="_blank">FAQ</a></li>
                </ul>
              </div>
              <div class="col-auto">
                <a href="https://github.com/tabler/tabler" class="btn btn-outline-primary btn-sm" target="_blank">Source code</a>
              </div>
            </div>
          </div>
          <div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
            Copyright © 2020 <a href="./index.html">Owner-work</a>. 有任何问题，请发送邮件至邮箱 heliangyuan10#163.com (#换成@).
          </div>
        </div>
      </div>
    </footer>
  </div>

  <!-- 新增公司的模态框 -->
  <div class="modal fade" id="newCompanyModal" role="dialog" aria-labelledby="">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <div class="card-status bg-blue"></div>
          <h4 class="text-center" id="modal_title">新增公司</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"> </button>
        </div>
        <div id="newCompany" class="card dimmer">
          <div class="loader"></div>
          <form class="card-body dimmer-content">
            <div class="form-group">
              <label class="form-label">公司名称<span class="form-required">*</span></label>
              <input type="text" class="form-control" name="n_company_name" value="">
            </div>
            <div class="form-group">
              <label class="form-label">管理人<span class="form-required">*</span></label>
              <input type="text" class="form-control" name="n_company_boss" value="">
            </div>
            <div class="form-group">
              <label class="form-label">地址<span class="form-required">*</span></label>
              <input type="text" class="form-control" name="n_company_address" value="">
            </div>
            <div class="form-group">
              <label class="form-label">就任职位<span class="form-required">*</span></label>
              <input type="text" class="form-control" name="n_position" value="">
            </div>
            <div class="form-group">
              <label class="form-label">是否在职<span class="form-required">*</span></label>
              <div class="custom-controls-stacked">
                <label class="custom-control custom-radio custom-control-inline">
                  <input type="radio" class="custom-control-input" name="n_on_the_job" value="1" checked>
                  <span class="custom-control-label">在职</span>
                </label>
                <label class="custom-control custom-radio custom-control-inline">
                  <input type="radio" class="custom-control-input" name="n_on_the_job" value="0">
                  <span class="custom-control-label">离职</span>
                </label>
              </div>
            </div>
            <div class="form-grwork_oup">
              <label class="form-label">备注</label>
              <input type="text" class="form-control" name="n_remark" value="">
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
              <button type="button" class="btn btn-primary" onclick="newCompany()">确认</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- 编辑公司的模态框 -->
  <div class="modal fade" id="editCompanyModal" role="dialog" aria-labelledby="">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <div class="card-status bg-green"></div>
          <h4 class="text-center" id="modal_title">编辑公司信息</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"> </button>
        </div>
        <div id="editCompany" class="card dimmer">
          <div class="loader"></div>
          <form class="card-body dimmer-content">
            <input type="hidden" name="company_id" value="">
            <div class="form-group">
              <label class="form-label">公司名称<span class="form-required">*</span></label>
              <input id="company_name" type="text" class="form-control" name="company_name" value="">
            </div>
            <div class="form-group">
              <label class="form-label">管理人<span class="form-required">*</span></label>
              <input id="company_boss" type="text" class="form-control" name="company_boss" value="">
            </div>
            <div class="form-group">
              <label class="form-label">地址<span class="form-required">*</span></label>
              <input id="company_address" type="text" class="form-control" name="company_address" value="">
            </div>
            <div class="form-group">
              <label class="form-label">就任职位<span class="form-required">*</span></label>
              <input id="position" type="text" class="form-control" name="position" value="">
            </div>
            <div class="form-group">
              <label class="form-label">是否在职<span class="form-required">*</span></label>
              <div class="custom-controls-stacked">
                <label class="custom-control custom-radio custom-control-inline">
                  <input type="radio" class="custom-control-input" name="on_the_job" value="1" checked>
                  <span class="custom-control-label">在职</span>
                </label>
                <label class="custom-control custom-radio custom-control-inline">
                  <input type="radio" class="custom-control-input" name="on_the_job" value="0">
                  <span class="custom-control-label">离职</span>
                </label>
              </div>
            </div>
            <div class="form-grwork_oup">
              <label class="form-label">备注</label>
              <input id="remark" type="text" class="form-control" name="remark" value="">
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
              <button type="button" class="btn btn-primary" onclick="goEditCompany()">更新</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- 删除公司的模态框 -->
  <div class="modal fade" id="deleteCompany" role="dialog" aria-labelledby="deleteModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="card-status bg-red"></div>
        <div class="modal-header">
          <h4 class="text-center" id="deleteModalLabel">删除公司</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"> </button>
        </div>
        <div class="dimmer">
          <div class="loader"></div>
          <form class="dimmer-content">
            <div class="modal-body text-center">
              <label class="text-center">是否确定删除公司：<strong> </strong> 的信息？</label>
            </div>
            <input type="hidden" name="d_company_id" value="">
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
              <button type="button" class="btn btn-primary" onclick="goDelCompany()">删除</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

</body>
<script type="text/javascript">
  require(['jquery'], function ($) {
    $("#userName")[0].innerText = localStorage.UserName
    if (localStorage.UserHeadImg!=null && localStorage.UserHeadImg!="null" && localStorage.UserHeadImg!=""){
      $(".avatar.avatar-lg").css("background-image", "url("+ localStorage.UserHeadImg +")")
    }else{
      $(".avatar.avatar-lg").css("background-image", "url(./demo/faces/male/44.jpg)")
    }
    // 初始化数据
    console.log("初始化内容")
    getCompanyList()

    // 点击上一页
    $("#previou_page").click(() => {
      console.log("当前第 " + $("#current_page")[0].innerText + " 页")
      if ($("#current_page")[0].innerText == 1) {
        console.log("当前已是第一页！")
      } else {
        getCompanyList(page = parseInt($("#current_page")[0].innerText) - 1, limit = $("select[name=the_limit]").val())
      }
    })

    // 点击下一页
    $("#next_page").click(() => {
      console.log("当前第 " + $("#current_page")[0].innerText + " 页")
      if ($("#current_page")[0].innerText == $("#total_page")[0].innerText) {
        console.log("当前已是最后一页！")
      } else {
        getCompanyList(page = parseInt($("#current_page")[0].innerText) + 1, limit = $("select[name=the_limit]").val())
      }
    })

    // 选择每页多少数据
    $("select[name=the_limit]").change(() => {
      let limit_c = $("select[name=the_limit]").val()
      console.log(limit_c)
      getCompanyList(page = 1, limit = limit_c)
    })
  })


  // 获取列表数据
  function getCompanyList(page = 1, limit = 5) {
    $("#dimmer_body").addClass("active")
    $.ajax(localStorage.BaseUrl + "/company/list", {
      headers: {
        Authorization: localStorage.Token
      },
      method: "GET",
      data: {
        page: parseInt(page),
        limit: parseInt($("select[name=the_limit]").val() || limit),
        company_name: $("input[name=search]").val()
      }
    }).done(function (data) {
      console.log(data)
      checkUserToken(data["status"], data["msg"])
      if (data["status"] == 1) {
        $("#current_page")[0].innerText = page
        // 总条数
        $("#data_count")[0].innerText = data["data"]["data_count"]
        // 分几页
        $("#total_page")[0].innerText = Math.ceil(data["data"]["data_count"] / limit)
        $("tbody").empty()
        // 拼接数据
        for (i = 0; i < data["data"]["data_list"].length; i++) {
          addDataList(data["data"]["data_list"][i], i + 1)
        }
      } else {
        showAlert("fe-alert-triangle", data["msg"], "alert-danger")
      }
    }).fail(function (xhr, status) {
      console.log(xhr)
      if (status == "error") {
        server_500()
      }
    }).always(function () {
      $("#dimmer_body").removeClass("active")
    })
  }

  // 新增公司
  function newCompany() {
    if ($("input[name=n_company_name]").val() == "" || $("input[name=n_company_boss]").val() == "" || $("input[name=n_company_address]").val() == "" || $("input[name=n_position]").val() == "") {
      showAlert("fe-alert-triangle", "公司名、公司管理人、公司地址、职位不能为空！", "alert-danger")
      return false
    }

    $("#newCompany").addClass("active")
    $.ajax(localStorage.BaseUrl + "/company/add_company", {
      headers: {
        Authorization: localStorage.Token
      },
      method: "POST",
      contentType: "application/json",
      dataType: "json",
      data: JSON.stringify({
        company_name: $("input[name=n_company_name]").val(),
        company_boss: $("input[name=n_company_boss]").val(),
        company_address: $("input[name=n_company_address]").val(),
        position: $("input[name=n_position]").val(),
        on_the_job: $("input[name=n_on_the_job]:checked").val(),
        remark: $("input[name=n_remark]").val()
      })
    }).done(function (data) {
      console.log(data)
      checkUserToken(data["status"], data["msg"])
      if (data["status"] == 1) {
        showAlert("fe-check", data["msg"], "alert-success")
        $("#newCompanyModal").modal("hide")
        getCompanyList()
      } else {
        showAlert("fe-alert-triangle", data["msg"], "alert-danger")
      }
    }).fail(function (xhr, status) {
      console.log(xhr)
      if (status == "error") {
        showAlert("fe-alert-triangle", `服务器错误！`, "alert-danger")
      }
    }).always(function () {
      $("#newCompany").removeClass("active")
    })
  }

  // 编辑公司信息
  function editCompany(data_id, n) {
    // console.log("弹出编辑公司信息的模态框")
    let tr = $("tbody tr")[n - 1]
    // console.log(tr.children[1].innerText)
    $("input[name=company_id]").val(data_id)
    $("input[name=company_name]").val(tr.children[1].innerText)
    $("input[name=company_boss]").val(tr.children[2].innerText)
    $("input[name=company_address]").val(tr.children[3].innerText)
    $("input[name=position]").val(tr.children[4].innerText)
    $("input[name=remark]").val(tr.children[6].innerText)
    // console.log(tr.children[5].innerText)
    if (tr.children[5].innerText == "离职") {
      $("input[name=on_the_job][value=1]").prop("checked", false)
      $("input[name=on_the_job][value=0]").prop("checked", true)
    } else {
      $("input[name=on_the_job][value=1]").prop("checked", true)
      $("input[name=on_the_job][value=0]").prop("checked", false)
    }
  }
  function goEditCompany() {
    if ($("input[name=company_name]").val() == "" || $("input[name=company_boss]").val() == "" || $("input[name=company_address]").val() == "" || $("input[name=position]").val() == "") {
      showAlert("fe-alert-triangle", "公司名、公司管理人、公司地址、职位不能为空！", "alert-danger")
      return false
    }

    $("#editCompany").addClass("active")
    $.ajax(localStorage.BaseUrl + "/company/update_company_info", {
      headers: {
        Authorization: localStorage.Token
      },
      method: "PUT",
      contentType: "application/json",
      dataType: "json",
      data: JSON.stringify({
        company_id: $("input[name=company_id]").val(),
        company_name: $("input[name=company_name]").val(),
        company_boss: $("input[name=company_boss]").val(),
        company_address: $("input[name=company_address]").val(),
        position: $("input[name=position]").val(),
        on_the_job: $("input[name=on_the_job]:checked").val(),
        remark: $("input[name=remark]").val()
      })
    }).done(function (data) {
      console.log(data)
      checkUserToken(data["status"], data["msg"])
      if (data["status"] == 1) {
        showAlert("fe-check", data["msg"], "alert-success")
        $("#editCompanyModal").modal("hide")
        getCompanyList()
      } else {
        showAlert("fe-alert-triangle", data["msg"], "alert-danger")
      }
    }).fail(function (xhr, error) {
      console.log(xhr)
      if (status == "error") {
        showAlert("fe-alert-triangle", `服务器错误！`, "alert-danger")
      }
    }).always(() => {
      $("#editCompany").removeClass("active")
    })
  }

  // 删除公司
  function delCompany(company_id, company_name) {
    $("#deleteCompany strong")[0].innerText = company_name
    $("input[name=d_company_id]").val(company_id)
    console.log($("input[name=d_company_id]").val())
  }
  function goDelCompany() {
    $("#deleteCompany").addClass("active")
    $.ajax(localStorage.BaseUrl + "/company/del_company", {
      headers: {
        Authorization: localStorage.Token
      },
      method: "DELETE",
      contentType: "application/json",
      dataType: "json",
      data: JSON.stringify({
        company_id: $("input[name=d_company_id]").val()
      })
    }).done(function (data) {
      console.log(data)
      checkUserToken(data["status"], data["msg"])
      if (data["status"] == 1) {
        showAlert("fe-check", data["msg"], "alert-success")
        $("#deleteCompany").modal("hide")
        getCompanyList()
      } else {
        showAlert("fe-alert-triangle", data["msg"], "alert-danger")
      }
    }).fail(function (xhr, error) {
      console.log(xhr)
      if (status == "error") {
        showAlert("fe-alert-triangle", `服务器错误！`, "alert-danger")
      }
    }).always(() => {
      $("#deleteCompany").removeClass("active")
    })
  }

  // 查询
  function queryCompany() {
    console.log($("input[name=search]").val())
    getCompanyList()
  }

  // 拼接数据
  function addDataList(data, i) {
    let tbody = $("tbody")[0]
    let new_tr = document.createElement("tr")
    let data_id = data["id"] || 0
    let data_company_name = data["name"] || ""
    let data_company_boss = data["boss"] || ""
    let data_company_address = data["address"] || ""
    let data_position = data["position"] || ""
    let data_on_the_job = data["on_the_job"]
    let data_remark = data["remark"] || ""

    let job_status = ``
    if (data_on_the_job == 1) {
      job_status = `<span class="status-icon bg-success"></span>在职`
    } else {
      job_status = `<span class="status-icon bg-secondary"></span>离职`
    }

    new_tr.innerHTML = `<td><span class="text-muted">` + i + `</span></td>
                        <td>` + data_company_name + `</td>
                        <td>` + data_company_boss + `</td>
                        <td>` + data_company_address + `</td>
                        <td>` + data_position + `</td>
                        <td>` + job_status + ` </td>
                        <td>` + data_remark + `</td>
                        <td>
                          <a class="icon" href="javascript:void(0)" data-toggle="modal" data-target="#editCompanyModal" onclick="editCompany('` + data_id + `', ` + i + `)">
                            <i class="fe fe-edit"></i>
                          </a>
                        </td>
                        <td>
                          <a class="icon" href="javascript:void(0)" data-toggle="modal" data-target="#deleteCompany" onclick="delCompany('` + data_id + `', '` + data_company_name + `' )">
                            <i class="fe fe-trash-2"></i>
                          </a>
                        </td>`
    tbody.append(new_tr)
  }
</script>

</html>